import { h } from 'vue';

import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';

import { ElButton,ElImage,ElInput,ElInputNumber,ElDatePicker,ElSelect,ElOption,ElSwitch } from 'element-plus';

import { useVbenForm } from './form';

import tableHeaderFilter from './tableHeaderFilter/index.vue';

setupVbenVxeTable({
  configVxeTable: (vxeUI) => {
    vxeUI.setConfig({
      grid: {
        align: 'center',
        border: false,
        columnConfig: {
          resizable: true,
        },
        minHeight: 180,
        formConfig: {
          // 全局禁用vxe-table的表单配置，使用formOptions
          enabled: false,
        },
        proxyConfig: {
          autoLoad: true,
          response: {
            result: 'items',
            total: 'total',
            list: 'items',
          },
          showActiveMsg: true,
          showResponseMsg: false,
        },
        round: true,
        showOverflow: true,
        size: 'small',
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellImage' },
    vxeUI.renderer.add('CellImage', {
      renderTableDefault(_renderOpts, params) {
        const { column, row } = params;
        const src = row[column.field];
        return h(ElImage, { src, previewSrcList: [src] });
      },
    });

    // 表格配置项可以用 cellRender: { name: 'CellLink' },
    vxeUI.renderer.add('CellLink', {
      renderTableDefault(renderOpts) {
        const { props } = renderOpts;
        return h(
          ElButton,
          { size: 'small', link: true },
          { default: () => props?.text },
        );
      },
    });

    vxeUI.renderer.add('ElDatePicker', {
      renderTableDefault(renderOpts, parmas) {
        const { row, column } = parmas;
        const { props: cellProps = {} } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          row[column.field] = newValue;
        };
        return h(ElDatePicker, {
          modelValue: value,
          'onUpdate:modelValue': handleChange,
          ...cellProps,
          style: { width: '100%' }
        });
      },
      renderFilter(renderOpts, parmas) {
        const { column, $table } = parmas;
        const { props = {} } = renderOpts;
        let currentValue = column.filters[0]?.data || '';
        const handleChange = (newValue) => {
          column.filters[0].data = newValue;
          currentValue = newValue;
          $table.updateFilterOptionStatus(column.filters[0], true);
        };
        return h(ElDatePicker, {
          modelValue: currentValue,
          type: 'date',
          placeholder: '请选择日期',
          'onUpdate:modelValue': (value) => handleChange(value),
          style: { width: '100%' },
          valueFormat: 'YYYY-MM-DD',
          ...props
        });
      },
      renderTableEdit(renderOpts, parmas) {
        const { row, column } = parmas;
        const { props: cellProps = {} } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          row[column.field] = newValue;
        };
        return h(ElDatePicker, {
          ...cellProps,
          modelValue: value,
          'onUpdate:modelValue': handleChange,
          style: { width: '100%' }
        });
      }
    });

    vxeUI.renderer.add('ElInput', {
      renderTableDefault(renderOpts, parmas) {
        const { row, column } = parmas;
        const { props: cellProps = {} } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          row[column.field] = newValue;
        };
        return h(ElInput, {
          ...cellProps,
          modelValue: value,
          'onUpdate:modelValue': handleChange,
          style: { width: '100%' }
        });
      },
      renderTableEdit(renderOpts, parmas) {
        const { row, column } = parmas;
        const { props: cellProps = {} } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          row[column.field] = newValue;
        };
        return h(ElInput, {
          ...cellProps,
          modelValue: value,
          'onUpdate:modelValue': handleChange,
          style: { width: '100%' }
        });
      },
    });

    vxeUI.renderer.add('ElSelect', {
      renderTableDefault(renderOpts, parmas) {
        const { row, column } = parmas;
        const { name,options = [],props = {} } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          row[column.field] = newValue;
        };
        const renderOptions = options.map(option => {
          return h(ElOption, { key: option.value,label: option.label,value: option.value });
        });
        return h(ElSelect, {
          ...props,
          modelValue: value,
          'onUpdate:modelValue': handleChange,
          style: { width: '100%' }
        },{ default: () => renderOptions });
      },
      renderTableEdit(renderOpts, parmas) {
        const { row, column } = parmas;
        const { name,options = [],props = {},change } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          row[column.field] = newValue;
          change && change({ row,column,changeValue:newValue });
        };
        const renderOptions = options.map(option => {
          return h(ElOption, { key: option.value,label: option.label,value: option.value });
        });
        return h(ElSelect, {
          ...props,
          modelValue: value,
          'onUpdate:modelValue': handleChange,
          style: { width: '100%' }
        },{ default: () => renderOptions });
      }
    });

    vxeUI.renderer.add('ElInputNumber', {
      renderTableDefault(renderOpts, parmas) {
        const { row, column, data } = parmas;
        const { name,props = {},change } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          const oldValue = value;
          row[column.field] = newValue;
          change && change({ row,column,tableList:data,oldValue,changeValue:newValue });
        };
        return h(ElInputNumber, {
          ...props,
          modelValue: Number(value),
          'onUpdate:modelValue': handleChange,
          style: { width: '100%' }
        });
      },
      renderTableEdit(renderOpts, parmas) {
        const { row, column, data } = parmas;
        const { name,props = {},change } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          const oldValue = value;
          row[column.field] = newValue;
          change && change({row,column,tableList:data,oldValue,changeValue:newValue});
        };
        return h(ElInputNumber, {
          ...props,
          modelValue: Number(value),
          'onUpdate:modelValue': handleChange,
          style: { width: '100%' }
        });
      }
    });

    vxeUI.renderer.add('ElSwitch', {
      renderTableDefault(renderOpts, parmas) {
        const { row, column } = parmas;
        const { name,props = {},change } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          row[column.field] = newValue;
          change && change({ row,column,changeValue:newValue });
        };
        return h(ElSwitch, {
          ...props,
          modelValue: value,
          'onUpdate:modelValue': handleChange,
          style: { width:'100%',display:'flex',justifyContent:'center' }
        });
      },
      renderTableEdit(renderOpts, parmas) {
        const { row, column } = parmas;
        const { name,props = {},change } = renderOpts;
        const value = row[column.field];
        const handleChange = (newValue) => {
          row[column.field] = newValue;
          change && change({ row,column,changeValue:newValue });
        };
        return h(ElSwitch, {
          ...props,
          modelValue: value,
          'onUpdate:modelValue': handleChange,
          style: { width:'100%',display:'flex',justifyContent:'center' }
        });
      }
    });

    vxeUI.renderer.add('customizeFilter', {
      renderTableFilter (renderOpts, renderParams) {
        return h(tableHeaderFilter, { renderParams:renderParams,filterRender:renderOpts});
      },
      tableFilterResetMethod (params) {
        const { options } = params;
        options.forEach((option) => {
          option.data = '';
        })
      },
      tableFilterRecoverMethod ({ option }) {
        option.data = '';
      },
      tableFilterMethod (params) {
        const { option, row, column } = params;
        const { data } = option;
        const cellValue = row[column.field];
        if (cellValue) {
          return cellValue.indexOf(data) > -1
        }
        return false;
      }
    });

    // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
    // vxeUI.formats.add
  },
  useVbenForm
});

export { useVbenVxeGrid };

export type * from '@vben/plugins/vxe-table';
